<%@ page contentType="text/html;charset=utf-8" language="java"%>
<!DOCTYPE html>
<%@include file="./common/base.jsp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有而就是有范儿</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div class="outer-wrapper outer-wrapper-m" id="backgroundId">
	<!--Top navigator -->
	<%@ include  file="./common/header.jsp"%>
	<!--top navigator end -->
    <!--content -->
    <div class="content clear" >
    	<!--content1:user infor -->
        <div class="content-userinfo" id="card-content-userinfo">
        	<h2 class="userinfo-title" id="nameId"></h2>
            <!--share list1-->
            <ul class="userinfo-share" id="urlsId">
            	<!-- <li><a href="#" class="sina"></a></li>
                <li><a href="#" class="tengxun"></a></li>
                <li><a href="#" class="douban"></a></li>
                <li><a href="#" class="happy"></a></li>
                <li><a href="#" class="wechat"></a>
                	<div class="wechat-2code hide-el" style="display:none;">
                    	<p>微信二维码</p>
                        <img alt="二维码" src="image/icon-code.gif" />
                    </div>
                </li> -->
            </ul><!--share list1 end -->
            <!--share list1 end 
            <img alt="微信扫扫我，分享朋友圈超有范儿！" title="微信扫扫我，分享朋友圈超有范儿！" src="image/icon-code-2.png" class="wechat-img" />--> 
            <div id="qrCodeId" class="wechat-img" alt="微信扫扫我，分享朋友圈超有范儿！" title="微信扫扫我，分享朋友圈超有范儿！"></div>
            <p class="user-remark mt15" id = "descriptionId"></p>
            <!--location end -->
            <ul class="location mt5">
            	<li><a href="#" class="up" id = "locationId"></a></li>
                <li><a href="#" class="mid" id = "careerId"></a></li>
                <li><a href="#" class="down" id = "interestId"></a></li>
            </ul><!--location end -->
            <!--share list2  -->
            <ul class="widget clear">
            	<li id="share-op" class="share-op-li">
                	<a href="javascript:void(0);" class="share-op" id="sub-share-op-id" onMouseOver="setShareCardId()">分享</a>
                	<div class="widget-share-pop hide-el"  id="bg-long_id" style="display:none;">
                    	分享到：
                        <ul class="share-pop-in">
                        	<li><a href="javascript:void(0);" class="pop-sina" onclick="javascript:bShare.share(event,'sinaminiblog',0);">新浪网</a></li>
                            <li><a href="javascript:void(0);" class="pop-tengxun" onclick="javascript:bShare.share(event,'qqmb',0);">腾讯</a></li>
                            <li><a href="javascript:void(0);" class="pop-happy" onclick="javascript:bShare.share(event,'kaixin001',0);" >开心网</a></li>
                            <li><a href="javascript:void(0);" class="pop-douban" onclick="javascript:bShare.share(event,'douban',0);">豆瓣</a></li>
                        </ul>
                    </div>                	
                </li>
                <li id="share-op1" class="share-op-li"><a href="javascript:void(0);" class="add">ADD</a></li>
                <li id="share-op2" class="share-op-li"><a href="javascript:void(0);" class="say-hi">SayHi</a></li>
                <li id="share-op3" class="share-op-li"><a href="javascript:void(0);" class="send-msg mail">Message</a></li>
                
            </ul><!--share list2 end -->
        </div><!--content1:user info -->
    	<!--move block -->
        <div class="counter clear" id="card-counter"></div>
    </div><!--content end -->
        <!--footer -->
     <%@ include  file="./common/footer.jsp"%>
    <!--footer end -->
</div>
<!-- Snake Change 20141209 -->
<div class="mailBG"></div>
<div class="mailContent">
	<div style="height: 40px;line-height: 40px;background-color: #f15a24;text-align: center;color: white;font-size: 16px;">
		发送邮件
		<div style="cursor: pointer;position: absolute;left: 480px;top: 11px;">
			<img src="image/mailClose.png" alt="close" title="关闭" class="mailClose" />
		</div>
	</div>
	<div style="height: 200px;margin-top: 25px;">
		<div style="float: left;font-size: 16px;margin: 0 20px;">内容</div><textarea style="width: 400px;height: 200px;border-color: #b2b2b2" rows="0" cols="0" id="mailContentId"></textarea>
	</div>
	<div style="margin: 0 auto;width: 165px;margin-top: 20px;">
		<div style="width: 180px;height: 35px;line-height: 35px;text-align: center;background-color: #f15a24;color: white;font-size: 16px;cursor: pointer; "  onclick="sendMailByCard();">
			发送
		</div>
	</div>
</div>
<!-- Snake Change 20141209 -->
</body>
<script>
function editCard() {
	 window.location.href='${path}/edit.jsp';
}

$(function() { 
	if(!checkLogin()){
		return;
	}
	loadCard();
	$('#qrCodeId').qrcode({
		width: 89, //宽度
		height:92, //高度
		text: "http://www.youoor.com/appCard.jsp?cardId="+loginCardId //任意内容
	});
});
function setShareCardId() {
	initBshare(loginCardId,loginCardBackGround);
}
function sendMailByCard() {
	var cardId = loginCardId;
	var title="来自youoor的邮件";
	var contentDiv = $("#mailContentId");
	var content =contentDiv.val();
	if(content==null||content=="") {
		alert("发送内容不能为空");return;
	}
	sendMailByYouoor(cardId,title,content);
	$('.mailBG').fadeOut(800);
	$('.mailContent').fadeOut(800);
	contentDiv.val("");
}

function loadCard(){
	objp= {}
	objp.userId = loginUserId;
	   $.ajax({
			  url: '${path}/core/getCardInfoByUserId',
			  type: 'POST',
			  timeout: 30000,
			  cache : false,
		      data :objp,
		      async: false,
			  success:function(msg){
				  setCardInfo(msg.cardInfo)
				  $("#backgroundId").css("background","url("+imgDomain+msg.cardInfo.userCard.background+") no-repeat");
				  $("#backgroundId").css("background-size","100% auto"); 
				  $("#card-content-userinfo").css({top:msg.cardInfo.userCard.cardY,left:msg.cardInfo.userCard.cardX});
				  $("#card-counter").css({top:msg.cardInfo.userCard.viewY,left:msg.cardInfo.userCard.viewX});
				 
			  },
			   failure:function(msg){
				   alert(eval('('+msg.responseText+')').error_text);
			   		
			   },
			   error:function(msg){
				   alert(eval('('+msg.responseText+')').error_text); 
			   }
		});
}

function setCardInfo(cardInfo){
	if (cardInfo != null) {
		cardObj = cardInfo.userCard;
		if (cardObj) {
		   $("#nameId").html(cardObj.name);
		   $("#locationId").html(cardObj.location)
		   $("#descriptionId").html(cardObj.description);
		   $("#interestId").html(cardObj.hobby);
		   $("#careerId").html(cardObj.occupation);
		   //$("#edit-description").val(cardObj.description);
		   $("#share-op").addClass("share-op-li-c"+cardObj.styleInt);
		   $("#sub-share-op-id").addClass("share-op"+cardObj.styleInt);
		   $("#share-op1").addClass("share-op-li-c"+cardObj.styleInt);
		   $("#share-op1 a").addClass("add"+cardObj.styleInt);
		   $("#share-op2").addClass("share-op-li-c"+cardObj.styleInt);
		   $("#share-op2 a").addClass("say-hi"+cardObj.styleInt);
		   $("#share-op3").addClass("share-op-li-c"+cardObj.styleInt);
		   $("#share-op3 a").addClass("send-msg"+cardObj.styleInt);
		   $("#bg-long_id").addClass("bg-long-c"+cardObj.styleInt);
		   
		   $("#card-counter").html(cardObj.viewCount);
		}
		linksObj = cardInfo.links;
		if (linksObj) {
			var uls = $("#urlsId");
			uls.append(formatLinkData(linksObj));
			/*for(var i=0;i<linksObj.length;i++){
				//var idstr = "#link"+(i+1)+"Id";
				var linkUrl = linksObj[i].linkUrl;
				var realLink=getlink(linkUrl);
				if (linkUrl.indexOf("weibo") >=0){
					uls.append("<li><a  href=\""+realLink+"\" class=\"sina\" target=\"_blank\"></a></li>");
				}else if (linkUrl.indexOf("qq") >= 0) {
					uls.append("<li><a  href=\""+realLink+"\" class=\"tengxun\" target=\"_blank\"></a></li>");
				} else  {
					uls.append("<li><a  href=\""+realLink+"\"  class=\"douban\" target=\"_blank\"></a></li>");
				}
			}
			uls.append("<li><a href=\"www.infoid.cn\" class=\"wechat\"></a>"+
					   "<div class=\"wechat-2code hide-el\" style=\"display:none;\">"+
					   "<p>微信二维码</p>"+
					   "<img alt=\"二维码\" src=\"image/icon-code.gif\" />"+
					   "</div></li>");*/
		}
	} 
	  
}


var move=false;//move mark
var iX,iY;//move mark

$("#card-content-userinfo,#card-counter").mousedown(function(e){
	move=true;
	iX=e.pageX-parseInt($(this).css("left"));
	iY=e.pageY-parseInt($(this).css("top"));

	//begin to move
});
$("#card-content-userinfo").mousemove(function(e){
	if(move){
		var x=e.pageX-iX;
		var y=e.pageY-iY;
		$(this).css({top:y,left:x});
		$(this).css({"cursor":"move","z-index":"10000"});//.fadeTo("fast",0.5);	
		setCardXY(x,y);
	}
}).mouseup(function(){
	move=false;
	$(this).css({"cursor":"move","z-index":"1"});//.fadeTo("fast",1);
});
$("#card-counter").mousemove(function(e){
	if(move){
		var x=e.pageX-iX;
		var y=e.pageY-iY;
		$(this).css({top:y,left:x});
		$(this).css({"cursor":"move","z-index":"10000"});//.fadeTo("fast",0.5);	
		setViewXY(x,y);
	}
}).mouseup(function(){
	move=false;
	$(this).css({"cursor":"move","z-index":"1"});//.fadeTo("fast",1);
});

function setCardXY(x,y) {
	objp= {}
	objp.type = "card";
	objp.iX = x;
	objp.iY = y;
	   $.ajax({
			  url: '${path}/core/setXY',
			  type: 'POST',
			  timeout: 30000,
			  cache : false,
		      data :objp,
		      async: false,
			  success:function(msg){
			
			  },
			   failure:function(msg){
				   alert(eval('('+msg.responseText+')').error_text);
			   		
			   },
			   error:function(msg){
				   alert(eval('('+msg.responseText+')').error_text); 
			   }
		});
}

function setViewXY(x,y) {
	objp= {}
	objp.type = "view";
	objp.iX = x;
	objp.iY = y;
	   $.ajax({
			  url: '${path}/core/setXY',
			  type: 'POST',
			  timeout: 30000,
			  cache : false,
		      data :objp,
		      async: false,
			  success:function(msg){
			
			  },
			   failure:function(msg){
				   alert(eval('('+msg.responseText+')').error_text);
			   		
			   },
			   error:function(msg){
				   alert(eval('('+msg.responseText+')').error_text); 
			   }
		});
}
</script>

</html>

